<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <p  id="p1">HelloWorld！！</p>

    <div class="box">555</div>
    <div class="box">666</div>

    <img class="aa" src="imgs/1.png" alt="失败" title="这是图片" width="100px" height="100px">
    <img class="aa" src="imgs/1.png" alt="失败" title="这是图片" width="100px" height="100px">
</body>

</html>
<script>
    /* 针对对象的方法和属性是非常众多的 而且没有规律 
    我们按照节点对象的作用分类来说：
    -操作内容的方法与属性
    -操作属性的方法与属性
    -操作事件的方法与属性
    -操作节点的方法与属性
    
    */

    //1.改变html内容
    //改变html输出流==body的内容
    // document.write("我是内容");
    // document.write("我是内容");
    // document.write("我是内容");
    // document.write("我是内容");

    //改变html标签中的内容
    var p1 = document.getElementById("p1");
    // p1.innerHTML = "你好，世界";//属性
    //p1.innerHTML = "<h1>你好，世界</h1>";//支持标签的识别

    //p1.innerText = "<h1>你好，世界</h1>";//识别为文字


    //注意数组的问题
    var divs = document.getElementsByClassName("box");
    divs[0].innerHTML = "<h1>你好，世界</h1>";
    divs[1].innerHTML = "<h1>你好，世界</h1>";

    for (let i = 0; i < divs.length; i++) {
        divs[i].innerHTML = "<h1>88888888888888888888</h1>";
    }


    //修改html元素对象的属性
    //html5的获取元素的方法 参数是选择器
    /* 
    document.querySelector("选择器") 永远都是获得满足选择器元素的第一个   一个对象
    document.querySelectorAll("选择器") 获得的是全部满足选择的元素对象    一个数组

    */
    var img = document.querySelectorAll(".aa");
    //改变html元素的属性  对象.属性名=值;
    img[0].src = "imgs/2.png";
    // img[1].width = "500px";
    

    img[1].title = "5555";
    img[1].style.width = "520px";//对于样式相关的东西 不分标签可以直接设置 
    // 通常可以使用对象.style.样式来设置


    //对象.属性：获取属性的值    对象.属性=值:为某个属性赋值
    alert(img[0].src);









</script>